<template>
  <div class="flex items-center gap1">
    <span class="cursor-pointer" @click="sort">{{ column.label }}</span>
    <div class="flex gap1">
      <icon v-show="sortIcon" :icon="sortIcon" @click="sort" />
      <el-popover v-model:visible="visible" trigger="click" width="auto">
        <template #reference>
          <icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" class="cursor-pointer" />
        </template>
        <div>
          <ElInput v-if="column.type == 'varchar'" v-model="unit.searchData[`search_${column.name}_like`]" :placeholder="`请输入${column.label}`" @keyup.enter="search"/>
          <ElInput v-if="column.type == 'code'" v-model="unit.searchData[`search_${column.name}_eq`]" :placeholder="`请输入${column.label}`" @keyup.enter="search"/>
        </div>
      </el-popover>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { TableColumn } from '@/seed-application/types'
  import { ElPopover, ElInput } from 'element-plus'
  import { ref, watch } from 'vue';import { Unit } from '@/seed-application/types'
  import { Icon } from '@/components/Icon'

  const props = defineProps<{unit: Unit, column: TableColumn}>()
  const unit = props.unit

  const getSortIcon = (d?: 'asc' | 'desc') => {
    if(d) return d == 'asc' ? 'ep:sort-up' : 'ep:sort-down'
    return ''
  }

  const direction = ref<'asc'|'desc'|undefined>(unit.orderData[`order_${props.column.name}`])
  const sortIcon = ref(getSortIcon(direction.value))
  const sort = () => {
    if(direction.value) {
      direction.value = direction.value == 'asc' ? 'desc' : undefined
    } else {
      direction.value = 'asc'
    }
    // emits('on-sort', props.column.name, direction.value)
  }

  watch(() => direction.value, d => sortIcon.value = getSortIcon(d))

  const visible = ref(false)
  const search = () => {
    unit.refresh?.()
  }

  // watch(() => unit.orderData['order_' + props.column.name], (direction) => {
  //   if('asc' == direction) {
  //     arrow.value = 'up'
  //   } else if('desc' == direction) {
  //     arrow.value = 'down'
  //   } else {
  //     arrow.value = undefined
  //   }
  // })
</script>